<template>
  <div class="content">
    <el-form inline :model="formData">
      <el-form-item>
        <el-button type="primary" size="mini" @click="addDialogVisible = true"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe id="tab">
      <el-table-column
        prop="name"
        label="剖面名称"
        align="center"
      ></el-table-column>
      <el-table-column label="站点名称" align="center">
        <template slot-scope="scope">
          <span v-for="item in scope.row.sensorInfoDmoList" :key="item.id">
            {{ item.sensorName + "," }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="剖面类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == '1'">横剖面</span>
          <span v-if="scope.row.type == '2'">纵剖面</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增横纵剖面"
      :visible.sync="addDialogVisible"
      width="35%"
      class="addDialog"
    >
      <el-scrollbar>
        <el-form
          ref="addListForm"
          label-position="left"
          label-width="5rem"
          :model="addListForm"
          :rules="rules"
        >
          <el-form-item label="监测体" prop="monitorId">
            <el-select
              v-model="addListForm.monitorId"
              placeholder="请选择监测体"
              @change="selectMonitorId($event)"
            >
              <el-option
                v-for="item in siderList"
                :key="item.monitorId"
                :value="item.monitorId"
                :label="item.monitorName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="剖面类型" prop="type">
            <el-select v-model="addListForm.type" placeholder="请选择剖面类型">
              <el-option label="横剖面" value="1"></el-option>
              <!-- <el-option label="纵剖面" value="2"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="剖面名称" prop="name">
            <el-input
              placeholder="请输入剖面名称"
              v-model="addListForm.name"
              style="width: 14.3rem"
            ></el-input>
          </el-form-item>
          <el-form-item label="起始高度" prop="xHeight">
            <el-input
              placeholder="请输入起始高度"
              v-model="addListForm.xHeight"
              style="width: 14.3rem"
            ></el-input>
          </el-form-item>
          <el-form-item label="末点距离" prop="yHorizontal">
            <el-input
              placeholder="请输入末点距离"
              v-model="addListForm.yHorizontal"
              style="width: 14.3rem"
            ></el-input>
          </el-form-item>
          <el-form-item label="新增站点" prop="addSensor">
            <el-button
              type="primary"
              @click="addRow(addListForm.sensorGroupDtoList)"
              size="mini"
              >新增</el-button
            >
            <el-scrollbar class="addTable">
              <el-table border :data="addListForm.sensorGroupDtoList">
                <el-table-column
                  prop="sensorId"
                  label="站点名称"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.sensorId" size="mini">
                      <el-option
                        v-for="item in sensorIdList"
                        :key="item.id"
                        :label="item.sensorName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="horizontalValue"
                  label="水平距离"
                  align="center"
                >
                  <template scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.horizontalValue"
                      placeholder="请输入"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="bottomValue"
                  label="底部高度"
                  align="center"
                >
                  <template scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.bottomValue"
                      placeholder="请输入"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="topValue"
                  label="顶部高度"
                  align="center"
                >
                  <template scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.topValue"
                      placeholder="请输入"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  style="width: 50px"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      @click="
                        deleteRow(scope.$index, addListForm.sensorGroupDtoList)
                      "
                      size="mini"
                      type="danger"
                      >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">确定</el-button>
        <el-button @click="addDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";

export default {
  data() {
    return {
      formData: {
        name: "",
      },
      addDialogVisible: false,
      tableData: [],
      addListForm: {
        name: "",
        sensorGroupDtoList: [],
        type: null,
        monitorId: "",
        xHeight: null,
        yHorizontal: null,
      },
      siderList: [],
      sensorIdList: [],
      defaultProps: {
        label: "sensorName",
      },
      rules: {
        monitorId: [
          {
            required: true,
            message: "请选择监测体",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择剖面类型",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入剖面名称",
            trigger: "blur",
          },
        ],
        xHeight: [
          {
            required: true,
            pattern: /^\d*\.{0,2}\d{0,2}$/,
            message: "只能是数字或小数 只能有两位小数点并且第一位不能为小数点",
            trigger: "blur",
          },
        ],
        yHorizontal: [
          {
            required: true,
            pattern: /^\d*\.{0,2}\d{0,2}$/,
            message: "只能是数字或小数 只能有两位小数点并且第一位不能为小数点",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getMonitorListAndSensorList();
  },
  methods: {
    // 查询横纵面列表数据
    getList() {
      axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"1\\"}","serviceCode":"listSensorGroup","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.tableData = res.data.parameter;
      });
    },

    // 获取监测类型及站点
    getMonitorListAndSensorList() {
      let data = window.localStorage.getItem("treeData");
      data = JSON.parse(data);
      for (let i = 0; i < data.treeData.length; i++) {
        this.siderList.push({
          monitorId: data.treeData[i].id,
          monitorName: data.treeData[i].monitorName,
          sensorList: data.treeData[i].sensorList,
        });
        for (let j = 0; j < this.siderList[i].sensorList.length; j++) {
          this.sensorIdList.push({
            sensorName: this.siderList[i].sensorList[j].sensorName,
          });
        }
      }
      this.selectMonitorId(this.addListForm.monitorId);
    },
    selectMonitorId(val) {
      this.sensorIdList = [];
      for (let i = 0; i < this.siderList.length; i++) {
        if (
          val == this.addListForm.monitorId &&
          val != null &&
          val != "" &&
          val != undefined
        ) {
          for (let j = 0; j < this.siderList[i].sensorList.length; j++) {
            if (this.siderList[i].sensorList != null) {
              this.sensorIdList.push(this.siderList[i].sensorList[j]);
            } else {
              this.sensorIdList = [];
            }
          }
        }
      }
    },
    deleteRow(index, rows) {
      //删除改行
      rows.splice(index, 1);
    },
    addRow(tableData, event) {
      tableData.push({
        sensorId: null,
        horizontalValue: null,
        topValue: null,
        bottomValue: null,
      });
    },
    addconfigurateOptions() {
      this.addListForm.sensorGroupDtoList.push({
        sensorId: null,
        horizontalValue: null,
        topValue: null,
        bottomValue: null,
      });
    },
    // 新增
    add() {
      this.$refs.addListForm.validate(async (val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.addListForm)) {
            formData.append(key, value);
          }
          var addFormInfo = JSON.stringify(this.addListForm);
          var sendData = {
            parameter: "",
            serviceCode: "",
            timestamp: "",
            uuid: "",
          };
          sendData.parameter = addFormInfo;
          sendData.serviceCode = "addSensorGroupProcessor";
          var sendString = JSON.stringify(sendData).replace("%", "%25");
          axios({
            method: "post",
            url: serviceApi.KB_API,
            data: `appMsg=` + sendString,
          }).then((res) => {
            if (res.data.resultcode == "0000") {
              this.$message({
                type: "success",
                message: "新增成功",
                offset: 400,
                duration: 1000,
                onClose: () => {
                  this.getList();
                },
              });
            } else {
              this.$message({
                type: "error",
                message: "新增失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
          this.addDialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: "请完善表单信息",
            offset: 400,
            duration: 500,
          });
        }
      });
    },
    // 删除
    del(row) {
      this.$confirm("您确定要删除该条数据吗？", "删除横纵面设置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"id\\":\\"${row.id}\\"}","serviceCode":"deleteSensorGroupProcessor","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            if (res.data.resultcode == "0000") {
              this.$message({
                type: "success",
                message: "成功删除数据",
                duration: 1000,
                onClose: () => {
                  this.getList();
                },
              });
            } else if (res.data.resultcode == "0001") {
              this.$message({
                type: "warning",
                message: message,
                duration: 1000,
                onClose: () => {
                  this.getList();
                },
              });
            } else {
              this.$message({
                type: "error",
                message: message,
                duration: 1000,
                onClose: () => {
                  this.getList();
                },
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
// 初始化页面表格样式
.el-table {
  display: block;
  overflow-y: auto;
  margin-bottom: 15px;
  overflow-x: hidden;
}
.el-table::before {
  z-index: inherit;
}
.addDialog {
  overflow-x: hidden !important;
  .el-scrollbar {
    height: 35rem;
    overflow-y: auto;
    /deep/.el-scrollbar__wrap {
      overflow-x: hidden;
      .addTable {
        display: block;
        height: 30vh;
        overflow-y: auto;
        margin-bottom: 15px;
        overflow-x: hidden;
        width: 33rem;
      }
    }
  }
}
</style>